<%- include("./layouts/header.ejs")%>

  <div class="main">
    <%- include("./layouts/navBar.ejs")%>

    <div class="container-fluid">
      <div class="page-title">
        <h1>我的个人资料</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form class="form-horizontal" id="myForm">
        <!-- 添加隐藏域存储用户id数据 -->
        <input type="hidden" value="<%= profileInfo.id%>" name="id">
        <div class="form-group">
          <label class="col-sm-3 control-label">头像</label>
          <div class="col-sm-6">
            <label class="form-image">
              <input id="avatar" type="file">
              <img src="<%= profileInfo.avatar%>">
              <i class="mask fa fa-upload"></i>
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-3 control-label">邮箱</label>
          <div class="col-sm-6">
            <input id="email" class="form-control" name="email" type="type" value="<%= profileInfo.email%>" placeholder="邮箱" readonly>
            <p class="help-block">登录邮箱不允许修改</p>
          </div>
        </div>
        <div class="form-group">
          <label for="slug" class="col-sm-3 control-label">别名</label>
          <div class="col-sm-6">
            <input id="slug" class="form-control" name="slug" type="type" value="<%= profileInfo.slug%>" placeholder="slug">
            <p class="help-block">https://zce.me/author/<strong>zce</strong></p>
          </div>
        </div>
        <div class="form-group">
          <label for="nickname" class="col-sm-3 control-label">昵称</label>
          <div class="col-sm-6">
            <input id="nickname" class="form-control" name="nickname" type="type" value="<%= profileInfo.nickname%>" placeholder="昵称">
            <p class="help-block">限制在 2-16 个字符</p>
          </div>
        </div>
        <div class="form-group">
          <label for="bio" class="col-sm-3 control-label">简介</label>
          <div class="col-sm-6">
            <textarea id="bio" class="form-control" name="bio" placeholder="Bio" cols="30" rows="6"><%= profileInfo.bio%></textarea>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-6">
            <!-- <button type="submit" class="btn btn-primary">更新</button> -->
            <input type="button" class="btn btn-primary" value="更新" id="btnUpdate">
            <a class="btn btn-link" href="password-reset.html">修改密码</a>
          </div>
        </div>
      </form>
    </div>
  </div>

<%- include("./layouts/aside.ejs")%>

<%- include("./layouts/footer.ejs")%>
<script>
  //1.上传头像
  //1.1注册事件
  $("#avatar").on("change",function(){
    //1.2 获取上传的数据,二进制数据
    var data = new FormData();
    //1.3 将上传图片追加到data对象数据中
    // console.log(this.files[0])
    data.append("avatar",this.files[0])
    //1.4 发送ajax请求
    $.ajax({
      type: 'post',
      url: '/uploadFile',
      data: data,
      contentType: false, // 不要用默认的编码方式 
      processData: false, // ajax内部不要再进行字符串的转换了
      dataType: 'json',
      success: function (res) {
        // console.log(res);
        if (res && res.code == 0) {
          $('#avatar').next().attr('src', res.src)

          // 需要将服务器端返回来的图片路径存在一个隐藏域中，以备更新时使用
          $('#myForm').append("<input type='hidden' value=" + res.src + " name='avatar'>")
        }
      }
    })
  })

  //2.更新个人中心数据
  $("#btnUpdate").on("click",function(){
    $.ajax({
      type: "post",
      url: "/updateProfileInfo",
      data:$("#myForm").serialize(), // 表单序列化
      dataType: "json",
      success: function(res){
        if(res && res.code==0){
          // location.href = "/profile"
          location.reload(true) // 强制刷新,相当于重新发送请求
        }
      }
    })
  })
</script>